<template>
  <Layout>
    <Header>
      <Menu mode="horizontal" theme="dark" :active-name="activeName" @on-select="handleClick">
        <div class="layout-logo"></div>
        <div class="layout-nav">
          <MenuItem v-for="item in menus" :key="item.id" :name="item.name">
            <Icon type="ios-navigate"></Icon>
            {{ item.title }}
          </MenuItem>
        </div>
      </Menu>
    </Header>
    <Layout>
      <Sider hide-trigger :style="{ background: '#fff' }">
        <Menu :active-name="route.name" :open-names="[activeName]" theme="light" width="auto">
          <Submenu :name="item.name" v-for="item in menus" :key="item.id">
            <template #title>
              <Icon :type="item.icon" />
              {{ item.title }}
            </template>
            <MenuItem v-for="m in item.children" :key="m.id" :name="m.name" :to="{ name: m.name }">{{ m.title }}</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Content :style="{ padding: '24px', minHeight: '280px', background: '#fff' }">
        <router-view />
      </Content>
    </Layout>
  </Layout>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

const { menus } = useStore().state.auth
const router = useRouter()
const route = useRoute()

const activeName = ref('sys')
function handleClick(name) {
  const menu = menus.find((m) => m.name === name)
  console.log(menu)
  activeName.value = name
  if (menu && menu.children) router.replace({ name: menu.children[0].name })
}
onMounted(() => {
  console.log(route)
})
</script>
